<template>
  <div>
    <TableSearch
      v-loading="loading"
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      :paginationDisplay="false"
      :paginationSlotDisplay="true"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <el-table-column label="交易流水号" slot="paymentBillNum">
        <template #default="{ row }">
          <router-link
            :to="{
              name: 'TransationDetail',
              params: { id: row.paymentBillNum },
              query: { form: 'unusualList' },
            }"
            >{{ row.paymentBillNum }}</router-link
          >
        </template>
      </el-table-column>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import { selectPaymentBillErrorLog } from '@/api/transation'

const failType = {
  PROFITSHAREFAIL: '分账失败',
  REFUNDFAIL: '退款失败',
  PAYMENTFAIL: '支付失败',
  PROFITSHAREREFUNDFAIL: '分账回退失败',
}

export default {
  name: 'TransationUnusualList',
  components: { TableSearch },
  data() {
    return {
      form: {},
      loading: false,
      tableData: {},
      columns: [
        {
          slot: 'paymentBillNum',
          resourceId:
            '/web/fund-management/paymentbillErrorLog-management/交易流水号',
        },
        {
          label: '设备号',
          prop: 'deviceId',
          resourceId:
            '/web/fund-management/paymentbillErrorLog-management/设备号',
        },
        {
          label: '所属电站',
          prop: 'stationName',
          resourceId:
            '/web/fund-management/paymentbillErrorLog-management/所属电站',
        },
        {
          label: '所属运营商',
          prop: 'userName',
          resourceId:
            '/web/fund-management/paymentbillErrorLog-management/所属运营商',
        },
        {
          label: '失败类型',
          prop: 'errorTypeEnum',
          resourceId:
            '/web/fund-management/paymentbillErrorLog-management/失败类型',
          formatter: (row) => {
            return failType[row.errorTypeEnum]
          },
        },
        {
          label: '失败原因',
          prop: 'description',
          resourceId:
            '/web/fund-management/paymentbillErrorLog-management/失败原因',
        },
      ],
      searchPath: '/web/fund-management/paymentbillErrorLog-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'paymentBillNum',
          placeholder: '请输入交易流水号',
          clearable: true,
        },
        {
          type: 'text',
          value: 'deviceId',
          placeholder: '请输入设备号',
          clearable: true,
        },
        {
          type: 'text',
          value: 'stationName',
          placeholder: '请输入所属电站',
          clearable: true,
        },
        {
          type: 'text',
          value: 'userName',
          placeholder: '请输入所属运营商',
          clearable: true,
        },
        {
          type: 'select',
          value: 'errorType',
          options: () => {
            return Object.keys(failType).map((item) => {
              return {
                label: failType[item],
                value: item,
              }
            })
          },
          placeholder: '-请选择失败类型-',
          clearable: true,
        },
      ],
    }
  },
  methods: {
    handleTableData(params) {
      this.loading = true
      selectPaymentBillErrorLog(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
<style>
a {
  color: #4c71f9;
}
</style>
